<template>
  <div>
    <!-- 数据表格 -->
    <div>
      <Table
        size="small"
        border
        :stripe="true"
        :columns="tableHeader"
        :data="tableData"
        height="420"
        style="margin-top: 12px"
        @on-selection-change="selectionChange"
      ></Table>
    </div>
    <!-- 显示问题内容 -->
    <div>
      <Modal
        :title="'问题标题：'+contentTitle"
        :value="reqeustContentShow"
        :mask-closable="false"
        :closable="false"
        draggable
      >
        <Reqeust-answer-content :content="requestEntity.content"/>
        <div slot="footer">
          <Button type="info" @click="closeContentModal">关闭</Button>
        </div>
      </Modal>
    </div>
    <!-- 分页组件 -->
    <div>
      <navigation :search.sync="doSearch" :pageSizeOpts="[9,18,27,36]" @navpage="pagerCallback"></navigation>
    </div>
  </div>
</template>
<script>
import navigation from '@/view/components/navigation/navigation'
import httpUtil from '@/libs/httpUtil'
import ReqeustAnswerContent from '@/view/ora-web/request-answer/RequestAnswerContent.vue'

export default {
  name: 'PageMyRequest',
  components: {
    ReqeustAnswerContent,
    navigation
  },

  data () {
    return {
      reqeustContentShow: false,
      requestEntity: {},
      // 表格头
      tableHeader: [
        {
          // 状态
          title: '状态',
          key: 'status',
          minWidth: 90,
          ellipsis: true,
          align: 'center',
          render: (h, params) => {
            let status = params.row.status
            if (status === 1) {
              return h(
                'span',
                { style: { color: '#515a6e', fontWeight: 'bold' } },
                '未回答'
              )
            } else if (status === 2) {
              return h(
                'span',
                { style: { color: '#2d8cf0', fontWeight: 'bold' } },
                '回答中'
              )
            } else if (status === 3) {
              return h(
                'span',
                { style: { color: '#19be6b', fontWeight: 'bold' } },
                '已采纳'
              )
            } else if (status === 5) {
              return h(
                'span',
                { style: { color: '#2b85e4', fontWeight: 'bold' } },
                '举报处理中'
              )
            } else if (status === 6) {
              return h(
                'span',
                { style: { color: '#ff9900', fontWeight: 'bold' } },
                '违规'
              )
            } else if (status === 7) {
              return h(
                'span',
                { style: { color: '#ed4014', fontWeight: 'bold' } },
                '已删除'
              )
            }
          }
        },
        {
          title: '问题标题',
          key: 'title',
          minWidth: 180,
          ellipsis: true,
          align: 'center'
        },
        // {
        //   title: "问题内容",
        //   key: "content",
        //   minWidth: 100,
        //   ellipsis: true,
        //   align: "center",
        //   fixed: "left",
        //   render: (h, params) => {
        //     let content = params.row.content;
        //     return h(
        //       "Button",
        //       {
        //         props: {
        //           type: "info",
        //           size: "small"
        //         },
        //         style: {
        //           marginRight: "5px"
        //         },
        //         on: {
        //           click: () => {
        //             this.showContent(params.row);
        //           }
        //         }
        //       },
        //       "查看"
        //     );
        //   }
        // },
        {
          title: '回答数',
          key: 'answerCount',
          minWidth: 90,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '提问日期',
          key: 'createdAt',
          minWidth: 150,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 7) {
              return h('span', {}, '')
            } else {
              return h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                    to: {
                      path: '/answer/' + params.row.tid
                    }
                  }
                },
                '问题详情'
              )
            }
          }
        }
      ],
      // 表格数据：
      tableData: [],
      collapseShow: false,
      doSearch: false,
      contentTitle: '问题内容',
      selectArray: [],
      condition: {},
      createdDateRange: [], // 创建日期的起始截止值
      professionList: [],
      courseList: []
    }
  },
  methods: {
    // 显示内容
    showContent (row) {
      // alert(content);
      this.contentTitle = row.title
      this.requestEntity = row

      this.reqeustContentShow = true
    },
    // 关闭内容显示
    closeContentModal () {
      this.reqeustContentShow = false
    },

    // 多选
    selectionChange (val) {
      this.selectArray = val
      console.log(val)
      console.log('selctArray:', this.selectArray)
      // debugger
    },

    // 删除表格数据
    deleteBtn (id) {
      debugger
      id += ','
      this.handleDelete(id)
    },

    // 批量删除
    batchDeletBtn () {
      let select = this.selectArray
      let ids = ''
      let flag = true
      // 判断有无选择
      if (select.length > 0) {
        select.forEach((entity, n) => {
          if (entity.status === 7) {
            flag = false
          }
          ids = ids + entity.tid + ','
        })
        if (flag) {
          this.handleDelete(ids)
        } else {
          this.$Message.warning('含有已删除项')
        }
      } else {
        this.$Message.warning('请先选择需要删除的选项')
      }
    },

    // 向后端请求删除操作
    handleDelete (ids) {
      httpUtil.asyncDelete(
        'admin/rm/request/delete',
        {
          ids: ids
        },
        res => {
          if (res.data.code === 200) {
            this.$Message.info(res.data.msg)
            this.queryMethod()
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 搜索重置
    handleResetBtn () {
      this.$refs['searchForm'].resetFields()
      this.condition = {}
      this.createdDateRange = ['', '']
      this.queryMethod()
    },

    // 点击翻页
    pagerCallback (page, search) {
      let option = {
        url: 'web/user-main/queryRequest',
        pageData: page,
        success: response => {
          this.tableData = response.data.records
        }
      }
      if (search) {
        option.params = {
          data: this.condition
        }
      }
      this.$httpUtil.pageSearch(option)
    },
    queryMethod () {
      if (this.createdDateRange[0] !== '') {
        // 如果选择了日期，取出起始值
        this.condition.createdDateStart = this.createdDateRange[0]
        this.condition.createdDateEnd = this.createdDateRange[1]
      }
      this.doSearch = true
    },

    // 获取下拉框列表
    getProfessionCourseData () {
      this.$httpUtil.asyncGet(
        'admin/pc/profession/getAllProfessionCourse',
        {},
        res => {
          if (res.data.code === 200) {
            this.professionList = res.data.records.allProfession
            this.courseList = res.data.records.allCourse
          } else {
            this.$Message.success(res.data.msg)
          }
        }
      )
    },

    // 页面初始化
    init () {
      this.queryMethod()
      this.getProfessionCourseData()
    }
  },
  mounted: function () {
    this.init()
  }
}
</script>
